// 全局宽高变量  16:9
$bigWidth: 100/1920;
$bigHeight: 100/1080;

$main_color_red: 0;
$main_color_green: 143;
$main_color_blue: 224;

$sub_color_red: 0;
$sub_color_green: 143;
$sub_color_blue: 224;

$sub_color2_red: 0;
$sub_color2_green: 192;
$sub_color2_blue: 255;

@mixin main_bg_color($opacity:1) {
    background-color: rgba($main_color_red, $main_color_green, $main_color_blue, $opacity) !important;
}

@mixin sub_bg_color($opacity:1) {
    background-color: rgba($main_color_red, $main_color_green, $main_color_blue, $opacity);
}

@mixin main_font_color($opacity:1) {
    color: rgba($main_color_red, $main_color_green, $main_color_blue, $opacity);
}

@mixin sub_font_color($opacity:1) {
    color: rgba($sub_color_red, $sub_color_green, $sub_color_blue, $opacity);
}

/* flex布局 */
@mixin flex($justify: center, $align: center, $wrap: nowrap) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $wrap;
}

/* width */
@mixin w($value: 0) {
    width:calc(#{$value * $bigWidth});
}

/* height */
@mixin h($value: 0) {
    height: calc(#{$value * $bigHeight});
}

/* padding */
@mixin padding($value: 0, $type: 'left') {
    @if $type=='left' {
        padding-left: calc(#{$value * $bigWidth})
    }

    @if $type=='right' {
        padding-right: calc(#{$value * $bigWidth})
    }

    @if $type=='top' {
        padding-top: calc(#{$value * $bigHeight})
    }

    @if $type=='bottom' {
        padding-bottom: calc(#{$value * $bigHeight})
    }
}

/* margin */
@mixin margin($value: 0, $type: 'left') {
    @if $type=='left' {
        margin-left: calc(#{$value * $bigWidth})
    }

    @if $type=='right' {
        margin-right: calc(#{$value * $bigWidth})
    }

    @if $type=='top' {
        margin-top: calc(#{$value * $bigHeight})
    }

    @if $type=='bottom' {
        margin-bottom: calc(#{$value * $bigHeight})
    }
}

/* fontSize */
@mixin fs($value: 0) {
    font-size: calc(#{$value * $bigHeight});
}

@mixin lh($value: 0) {
    line-height: calc(#{$value * $bigHeight});
}

/* position */
@mixin position($value: 0, $type: 'top') {
    @if $type=='left' {
        left: calc(#{$value * $bigWidth})
    }

    @if $type=='right' {
        right: calc(#{$value * $bigWidth})
    }

    @if $type=='top' {
        top: calc(#{$value * $bigHeight})
    }

    @if $type=='bottom' {
        bottom: calc(#{$value * $bigHeight})
    }
}

//$attr 属性  $val 值  $steps 每次减少的值
@mixin space($attr, $val, $steps:2) {
    #{$attr}: $val;

    @media only screen and (max-width: 1200px) {
        #{$attr}: $val - $steps;
    }

    @media only screen and (max-width: 992px) {
        #{$attr}: $val - $steps*2;
    }

    @media only screen and (max-width: 768px) {
        #{$attr}: $val - $steps*3;
    }

    @media only screen and (max-width: 520px) {
        #{$attr}: $val - $steps*4;
    }

    @media only screen and (max-width: 420px) {
        #{$attr}: $val - $steps*5;
    }
}

// 溢出隐藏
@mixin ellipsis($num: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

html,
body {
    font-family: "微软雅黑" !important;
}



:deep .el-table {
    background: none;

    tr {
        background: none;
        color: #fff;
        border-color: #085461;
    }

    th.el-table__cell {
        background: #01caff;
    }

    th.el-table__cell.is-leaf,
    td.el-table__cell {
        border-color: #085461;
    }
}

:deep .el-table--group,
:deep .el-table--border {
    border: none !important;
}

:deep .el-table--group::after,
:deep .el-table--border::after {
    display: none;
}

:deep .el-table--group::after,
:deep .el-table--border::after,
.el-table::before {
    display: none;
}

:deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: rgba(1, 202, 255, 0.5);
}

:deep .el-table .green-row {
    background: #085461;
}

:deep .el-table--border .el-table__cell {
    border-right: none;
}

:deep .el-pagination {
    button:disabled {
        background: none;
    }

    button:hover {
        color: #fff;
    }

    .btn-prev,
    .btn-next {
        color: #fff;
        background: none;
    }

    .el-pagination__total {
        color: #fff;
    }

    .el-pager li {
        background: none;
        color: #fff;

        &.active {
            color: #72f5a9 !important;
            font-weight: bold;
        }
    }
}
/* 滚动条样式 */
.user-scroll-bar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
}

.user-scroll-bar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    /*border-radius: 4px;*/
    background-color: #006773;
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
}

.user-scroll-bar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 2px rgba(20, 72, 82, 1);
    background: #002d32;
    width: 2px;
    /*高宽分别对应横竖滚动条的尺寸*/
    /*border-radius: 4px;*/
}

.user-scroll-bar::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, .4);
}